         <style lang="less">
@import "./commProductManage.less";
</style>
<template>
  <div>
    <div class="search" id="commProductManagePage" v-show="commProductManagePageVisible">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="90" class="search-form">
                            <Form-item label="通用商品名称" prop="itemName" >
                              <Input type="text" v-model="searchForm.itemName" clearable placeholder="请输入通用商品名称" style="width: 200px;" />
                            </Form-item>
                            <Form-item label="供应商" prop="supplierId" >
                              <Input type="text" v-model="searchForm.supplierId" clearable placeholder="请输入供应商名称" style="width: 200px;"/>
                            </Form-item>
                            <Form-item label="状态" prop="status">
                              <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                <Option value="1">通过</Option>
                                <Option value="0">未审核</Option>
                                <Option value="-1">未通过</Option>
                              </Select>
                            </Form-item>
                            <!-- <span v-if="drop"></span> -->
                            <Form-item style="margin-left:-35px;">
                              <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                              <Button @click="handleReset" type="ghost" >重置</Button>
                              <!-- <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                              </a> -->
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="addCommProduct" type="primary" icon="plus-round">添加通用商品</Button>
                        <Button @click="delAll" type="ghost" icon="trash-a">批量删除</Button>
                        <Dropdown @on-click="handleDropdown">
                          <Button type="ghost">
                              更多操作
                              <Icon type="arrow-down-b"></Icon>
                          </Button>
                          <DropdownMenu slot="list">
                              <DropdownItem name="refresh">刷新</DropdownItem>
                              <DropdownItem name="exportData">导出所选数据</DropdownItem>
                          </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="margin-top-10 searchable-table-con1">
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                        <Table :columns="columns" :data="exportData" ref="exportTable" style="display:none"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="code-row-bg page">
                        <Page :current="this.commProductForm.pageNumber" :total="total" :page-size="this.commProductForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>

    <div class="search" id="commProductDetailPage" v-show="commProductDetailPageVisible" style="background-color:white;padding:20px;">
      <comm-product ref="commProductDetailComp" @on-commproduct-cancel="commProductDetailCancel" @on-commproduct-success="commProductSubmitSuccess"></comm-product>
    </div>

    <!-- <review-modal :isShow="isShowReviewModal" :reviewObject="reviewObject"></review-modal> -->
    <review-modal ref="commProReviewModal" @on-review-success="reviewSuccess"></review-modal>

  </div>
</template>

<script>

import dateFormatUtil from "@/utils/dateFormatUtil";

import CommProduct from "./commProductDetail.vue";
import ReviewModal from "./reviewModal.vue";

export default {
  name: "comm-product-manage",
  components: {
    CommProduct: CommProduct,
    ReviewModal
  },
  data() {
    return {
      loading: true,
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "chevron-down",
      selectCount: 0,
      selectList: [],
      searchForm: {
        itemName: "",
        supplierId: "",
        itemPrice: "",
        status: ""
      },
      modalType: 0,
      modalTitle: "",
      commProductForm: {
        status:0
      },
      errorPass: "",
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "名字",
          key: "itemName",
          width: 150,
          sortable: true
        },
        {
          title: "卖点",
          key: "sellPoint",
          width: 150,
          sortable: true
        },
        {
          title: "价格",
          key: "itemPrice",
          width: 150,
          sortable: true
        },
        {
          title: "供应商",
          // key: "supplierId",
          key: "supplier",
          width: 200,
          sortable: true,
          align: "center",
          render: (h, params) => {
            let re = "";
            if(params.row.supplier != null){
              re = params.row.supplier.supplierName;
            }
            return h("span", re);
          }
        },
        {
          title: "审核状态",
          key: "status",
          align: "center",
          width: 150,
          render: (h, params) => {
            let re = "";
            if (params.row.status === 0) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "未审核"
                )
              ]);
            } else if (params.row.status === -1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "未通过"
                )
              ]);
            } else if (params.row.status === 1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "通过"
                )
              ]);
            }
          },
          filters: [
            {
              label: "未审核",
              value: 0
            },
            {
              label: "未通过",
              value: -1
            },
            {
              label: "通过",
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.status === 0;
            } else if (value === -1) {
              return row.status === -1;
            } else if (value === 1) {
              return row.status === 1;
            }
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 340,
          align: "center",
          render: (h, params) => {
            if (params.row.status === 10) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "ghost",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.disable(params.row);
                      }
                    }
                  },
                  "禁用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.review(params.row);
                      }
                    }
                  },
                  "审核"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "查看"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        }
      ],
      data: [],
      exportData: [],
      total: 0,
      commProductManagePageVisible: true,
      commProductDetailPageVisible: false
    };
  },
  methods: {
    init() {
      this.getCommProductsList();
      this.cleanSelectCount();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getCommProductsList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getCommProductsList();
    },
    getCommProductsList() {
      this.loading = true;
      this.getRequest("/goods_item/list", this.searchForm).then(res => {
        this.loading = false;
        if (res.success === true) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.init();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.init();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.init();
    },
    handleDropdown(name) {
      if (name === "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "通用商品数据"
            });
          }
        });
      } else if (name === "refresh") {
        this.getCommProductsList();
      }
    },

    addCommProduct(v) {
      // this.modalType = 0;
      // this.modalTitle = "添加会员";
      // this.$refs.commProductForm.resetFields();
      // for (let attr in this.commProductForm) {
      //   if (this.commProductForm[attr] == null) {
      //     this.commProductForm[attr] = "";
      //   }
      // }
      // this.goodsModalVisible = true;
      // this.$router.push({
      //   name: "specialty-detail"
      // });
      // this.$refs.lineview.initData(this.currentSupplierId);

      this.$refs.commProductDetailComp.resetFormByType(0,null);

      //切换界面显示隐藏
      this.commProductManagePageVisible = false;
      this.commProductDetailPageVisible = true;
    },
    commProductDetailCancel:function(v){
      if(v){
        this.commProductManagePageVisible = true;
        this.commProductDetailPageVisible = false;
      }
    },
    commProductSubmitSuccess: function(v){
      console.log("================commProductSubmitSuccess==================")
      if(v){
        this.commProductManagePageVisible = true;
        this.commProductDetailPageVisible = false;
        this.getCommProductsList();
      }
    },
    edit(v) {
      let editCommProductId = v.id;
      this.loading = true;
      this.getRequest("/goods_item/getItemById/" + editCommProductId).then(res =>{
        this.loading = false;
        console.log(res.result);
        let updateCommProduct = res.result;

        this.$refs.commProductDetailComp.resetFormByType(1, updateCommProduct);
        //切换界面显示隐藏
        this.commProductManagePageVisible = false;
        this.commProductDetailPageVisible = true;
      }).catch(err => {
        console.log(err);
        console.log("============请求超时===============");

      })
    },
    enable(v) {
      this.$Modal.confirm({
        title: "不通过",
        content: "您确认不通过 " + v.goodsName + " ?",
        onOk: () => {
          this.putRequest("/goods/auditNotPass/" + v.id).then(res => {
             console.log("不通过2:",res)
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },

    review(v) {
      var reviewObj={
        reviewId: v.id,
        title: "商户审核",
        status: v.status+'',
        reason: v.reason
      }
      this.$refs.commProReviewModal.openReviewModal(true,reviewObj);
    },
    reviewSuccess:function(v){
      if(v){
        this.getCommProductsList();
      }
    },


    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除通用商品 " + v.itemName + " ?",
        onOk: () => {
          this.deleteRequest("/goods_item/delete/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "chevron-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "chevron-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
      this.cleanSelectCount();
    },
    cleanSelectCount(){
      this.selectCount = 0;
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.deleteRequest("/goods_item/delete/" + ids).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    console.log("============mounted==========");
    this.init();
  }
};
</script>
